<template>
	<view class="container">
		<view class="content">
			<view class="apply_box">
				<view class="apply_title">
					拍摄上传送达证明
				</view>
				<view class="img_box">
					<view class="images_box" v-for="(item,index) in images" v-if="images.length>0"
						@click="lookImages(index)" :key="index">
						<view class="del_btn" @click.stop="delImg(index)">
							<u-icon name="trash-fill"></u-icon>
						</view>
						<image class="images" :src="item" mode=""></image>
					</view>
					<view class="add_box">
						<u-icon name="plus" size="80" color="#666" @click="uploadImg"></u-icon>
					</view>
				</view>
				<view class="address">
					<u-icon name="map" color="#EA3D37" size="36" style="margin-right: 20rpx;"></u-icon>
					{{locations}}
				</view>
				<view class="time">{{$dTime(timestamp,2)}}</view>
				<view class="qr_btn" @click="submit">
					确认送达
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '@/libs/qqmap-wx-jssdk.min.js'
	export default {
		data() {
			return {
				images: [],
				timestamp: '',
				order_id: null,
				locations: ''
			}
		},
		async onLoad(opdata) {
			if (opdata.order_id) {
				this.order_id = opdata.order_id
			}
			this.getTime()
			const loaction = await this.getLoaction()
			this.locations = loaction.address
		},
		methods: {
			//获取位置信息
			async getLoaction() {
				return new Promise((resolve) => {
					//位置信息默认数据
					let location = {
						longitude: 0,
						latitude: 0,
						province: "",
						city: "",
						area: "",
						street: "",
						address: "",
					};
					uni.getLocation({
						type: "gcj02",
						success(res) {
							location.longitude = res.longitude;
							location.latitude = res.latitude;
							// 腾讯地图Api
							const qqmapsdk = new QQMapWX({
								key: 'NBDBZ-IXZ6C-QXO2M-AIGGU-4XAOO-F5FUZ' //这里填写自己申请的key
							});
							qqmapsdk.reverseGeocoder({
								location,
								success(response) {
									let info = response.result;
									console.log(info);
									location.province = info.address_component.province;
									location.city = info.address_component.city;
									location.area = info.address_component.district;
									location.street = info.address_component.street;
									location.address = info.address;
									resolve(location);
								},
								fail: errorres => {
									location.address = errorres.message
									resolve(location)
								}
							});
						},
						fail(err) {
							console.log(err)
							resolve(location);
						},
					});
				});
			},
			submit() {
				this.$allApi.changeOrderStatus({
					orderid: this.order_id,
					status: 2,
					delivery_img: this.images.join(','),
					delivery_address: this.locations,
				}).then(res => {

				})
			},
			getTime() {
				this.timestamp = (new Date().getTime()) / 1000;
			},
			lookImages(index) {
				uni.previewImage({
					urls: this.images,
					current: index
				})
			},
			uploadImg() {
				uni.chooseImage({
					count: 9,
					success: (res) => {
						for (let item of res.tempFiles) {
							if (res.tempFiles[0].size > item.size) {
								this.$api.total('图片大小不能超过5MB，请检查')
								return
							}
							uni.uploadFile({
								url: this.$baseUrl + 'api/upload/image',
								filePath: item.path,
								name: 'file',
								header: {
									'Authorization': 'Bearer ' + uni.getStorageSync('userToken') || ''
								},
								success: (imgRes) => {
									let datas = JSON.parse(imgRes.data)

									if (datas.status == 410000) {
										uni.showToast({
											icon: 'none',
											title: datas.msg
										})
										setTimeout(() => {
											uni.navigateTo({
												url: '/pages/index/login',
											})
										}, 1500)
									} else if (datas.status == 410001) {
										uni.showToast({
											icon: 'none',
											title: datas.msg
										})
										setTimeout(() => {
											uni.navigateTo({
												url: '/pages/index/login',
											})
										}, 1500)
									}
									this.images.push(datas.data.url)
								}
							})
						}

					}

				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.time {
		margin-top: 10rpx;
		padding-left: 56rpx;
	}

	.address {
		margin-top: 30rpx;
	}

	.qr_btn {
		margin-top: 50rpx;
		height: 70rpx;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		background: #EA3D37;

	}

	.apply_box {
		width: 710rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;

		.img_box {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding-top: 20rpx;

			.add_box {
				width: 210rpx;
				height: 210rpx;
				border-radius: 6rpx;
				background: #F9F9F9;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
			}

			.images_box {
				width: 210rpx;
				height: 210rpx;
				margin-right: 10rpx;
				position: relative;

				.del_btn {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					color: red;
					font-size: 32rpx;
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.images {
					width: 210rpx;
					height: 210rpx;
					border-radius: 6rpx;
				}
			}
		}

		.input_box {
			padding-top: 20rpx;

			textarea {
				width: 100%;
				height: 200rpx;
				font-size: 24rpx;
				color: #999;
			}
		}

		.apply_title {
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;

			input {
				flex: 1;
				padding-left: 20rpx;
			}
		}

	}

	.content {
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.container {
		padding: 20rpx;
		min-height: 100vh;
		background: #f7f8f9;
	}
</style>